import React, { PureComponent } from 'react'

class A extends PureComponent {
  state = {
    carName: "奔驰c63",
    students: ["xixi", 'haha', '小明']
  }
  changeCar = () => {
    this.setState({ carName: "迈巴赫" })
    
    // PureComponent  会我们进行浅比
    // let obj=this.state
    // obj.carName="迈巴赫"
    // this.state===obj//true
    // this.setState(obj) 不会更新  对象引用地址一样
  }
  addSTudents = ()=> {
    //错误的添加方式
    // this.state.students.unshift("小刘")

    this.setState({students:['小李',...this.state.students]})

  }  // shouldComponentUpdate(nextProps,nextState){
  //   console.log(this.state,this.props)
  //   console.log(nextState,nextProps)
  //   return this.state.carName!==nextState.carName
  // }
  render() {
    console.log("parent-render")
    return (
      <div className="parent">
        我是父组件
        <div>{this.state.students.join(",")}</div>
        <div>车的名字：{this.state.carName}</div>
        <button onClick={this.changeCar}>点我换车</button>
        <button onClick={this.addSTudents}>添加学生</button>
        <B carName={'奥迪'} />
      </div>
    )
  }
}
class B extends PureComponent {
  // shouldComponentUpdate(nextProps,nextState){
  //   console.log(this.state,this.props)
  //   console.log(nextState,nextProps)
  //   return nextProps.carName!==this.props.carName
  // }
  render() {
    console.log("child-render")
    return (
      <div className="child mt">
        我是子组件
        <div>我接收的车是：{this.props.carName}</div>
      </div>
    )
  }
}

export default A